<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>导航来学习</title>
		<style>
			body,div,ul,li {
				margin:0;
				padding:0;
			}
			#nav {
				width:960px;
				height:35px;
				margin-top: 30px;
				margin:0 auto;
				background:#ccc;
			}
			#nav ul li {
				float:left;
				list-style:none;
				/*width:100px;*/
			/*	background:red;*/
				line-height:35px;
				text-align:center;
				margin-right:1px;
				padding:0 10px;
			}
			
			#nav ul li a {
				color:#333;
				text-decoration: none;
				font-size:12px;
				height:35px;
				/*background:#0ff;*/
				/*讲内联元素变块状元素显示*/
				display: block;
				float:left;
				padding-left: 10px;
			}
			#nav ul li a:hover {
				color:#fff;
				/*text-decoration:underline;*/
				background:#000;
				
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="http://www.baidu.com">W3Cfunc</a></li>
				<li><a href="http://www.baidu.com">厘米学院</a></li>
				<li><a href="http://www.baidu.com">培训课程</a></li>
				<li><a href="http://www.baidu.com">我要充电</a></li>
				<li><a href="http://www.baidu.com">前端职业生涯</a></li>
				<li><a href="http://www.baidu.com">课程答疑</a></li>
			</ul>
		</div>
	</body>
</html>